<template>
  <div class="image_list_div">
      <span v-for="(realItem,index) in realSrcList" :key="index" class="image_item" v-if="!isFile(realItem)">
        <el-image
          :src="`${realItem}`"
          fit="cover"
          :style="`width:${realWidth};height:${realHeight};`"
          :preview-src-list="[realItem]"
          v-if="isImage(realItem)"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <video :style="`width:${realWidth};height:${realHeight};`" v-if="isVideo(realItem)"
               @click="clickVideo(realItem)">
            <source :src="realItem"/>
        </video>

    </span>
    <el-dialog
      title="预览视频"
      :visible.sync="showVideo"
      width="30%"
      center>
      <video style="width: 100%" controls autoplay>
        <source :src="currentVideo"/>
      </video>
      <span slot="footer" class="dialog-footer">
    <el-button @click="showVideo = false">取 消</el-button>
    <el-button type="primary" @click="showVideo = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
  <!--
   <el-image
        :src="`${realSrc}`"
        fit="cover"
        :style="`width:${realWidth};height:${realHeight};`"
        :preview-src-list="realSrcList"
      >
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
  -->
</template>

<script>
import {isExternal} from "@/utils/validate";

export default {
  name: "ImagePreview",
  props: {
    src: {
      type: String,
      default: ""
    },
    width: {
      type: [Number, String],
      default: ""
    },
    height: {
      type: [Number, String],
      default: ""
    },
    showImgNum:{
      type: Number,
      default: 3
    }
  },

  data() {
    return {
      showVideo: false,
      currentVideo: null,
    }
  },

  methods: {
    clickVideo(src) {
      this.currentVideo = src;
      this.showVideo = true
    }
  },
  computed: {
    realSrc() {
      if (!this.src) {
        return;
      }
      let real_src = this.src.split(",")[0];
      if (isExternal(real_src)) {
        return real_src;
      }
      return process.env.VUE_APP_BASE_API + real_src;
    },
    realSrcList() {
      if (!this.src) {
        return;
      }
      let real_src_list = this.src.split(",");
      let srcList = [];
      real_src_list.forEach(item => {
        if (isExternal(item)) {
          return srcList.push(item);//obj
        }
        return srcList.push(process.env.VUE_APP_BASE_API + item);//process.env.VUE_APP_BASE_API+item  obj
      });
      if(srcList.length > this.showImgNum){
        srcList = srcList.slice(0,this.showImgNum)
      }
      return srcList;
    },
    realWidth() {
      return typeof this.width == "string" ? this.width : `${this.width}px`;
    },
    realHeight() {
      return typeof this.height == "string" ? this.height : `${this.height}px`;
    }
  },
};
</script>

<style lang="scss" scoped>
.image_item {
  margin: 0 5px;
}

.image_list_div {
  width: 100%;
}

.el-image {
  border-radius: 5px;
  background-color: #ebeef5;
  box-shadow: 0 0 5px 1px #ccc;

  ::v-deep .el-image__inner {
    transition: all 0.3s;
    cursor: pointer;

    &:hover {
      transform: scale(1.2);
    }
  }

  ::v-deep .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #909399;
    font-size: 30px;
  }
}
</style>
